<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>
<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        //前端建立websocket连接
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;//句柄

        //当页面关闭时，websocket连接也断开
        window.onbeforeunload = function() {
            ws_hdl.close();
        }

        var butto_state = "stop";

        //给按钮添加点击事件
        var butto_event = document.getElementById("match-button");
        butto_event.onclick = function(){
            if(butto_state == "stop"){
                var mess_json = {
                    optype: "match_start"
                }
                ws_hdl.send(JSON.stringify(mess_json));
            }
            else{
                var mess_json = {
                    optype: "match_stop"
                }
                ws_hdl.send(JSON.stringify(mess_json));
            }
        }
        //1、默认是stop,点击就开始匹配
        //2、匹配成功，将状态设置为取消匹配状态
        function user_info(){
            //向后端获取数据
            $.ajax({
                url: "/info",
                type: "get",
                success: function(res){
                    var info_html = "<p>" + "玩家名称: " + res.username +"    天梯总分: " + res.score + "</br>" +
                        " 比赛总场数: " + res.total_count + "    获胜总场数: "+ res.win_count + "</p>";
                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = info_html;//嵌入到显示页面中

                    //建立连接
                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onopen = ws_onopen;
                    ws_hdl.onclose = ws_onclose;
                    ws_hdl.onerror = ws_onerror;
                    ws_hdl.onmessage = ws_onmessage;
                    
                    window.onbeforeunload = function() { 
                        ws_hdl.close();
                    }
                },
                error: function(xhr){
                    //显示错误信息，并跳转到登录界面
                    alert(JSON.stringify(xhr));
                    location.replace("/login.html");
                }
            })
        }

        function ws_onopen(){
            console.log("websocket onopen");//打印提示日志
        }
         
         function ws_onclose(){
            console.log("websocket onclose");//打印提示日志
        }

         function ws_onerror(){
            console.log("websocket onerror");//打印提示日志
        }

        function ws_onmessage(evt) {
            var rsp_json = JSON.parse(evt.data);
            if (rsp_json.result == false) {
                alert(evt.data);
                location.replace("/login.html");
                return;
            }
            if (rsp_json["optype"] == "hall_ready") {
                alert("游戏大厅连接建立成功！");
            }else if (rsp_json["optype"] == "match_success") {
                //对战匹配成功
                alert("对战匹配成功，进入游戏房间！");
                location.replace("/game_room.html");
            }else if (rsp_json["optype"] == "match_start") {
                console.log("玩家已经加入匹配队列");
                button_state = "start";
                butto_event.innerHTML = "匹配中....点击停止匹配!";
                return;
            }else if (rsp_json["optype"] == "match_stop"){
                console.log("玩家已经移除匹配队列");
                button_state = "stop";
                butto_event.innerHTML = "开始匹配";
                return;
            }else {
                alert(evt.data);
                location.replace("/login.html");
                return;
            }
        }
        user_info();
    </script>
</body>
</html>